<template>
  <!-- prettier-ignore -->
  <el-dialog :visible.sync="dialog.编辑标签.visible" :close-on-click-modal="false" @before-close="handleClose">
    
    <div slot="title" class="align-cm">
      <b class="fc-gray10">编辑标签</b>
    </div>
    <!-- <pre>{{ $store.state.dialog.编辑标签.temp }}</pre> -->
    <el-checkbox-group v-model="checkList">
      <div v-for="c in labelPool" :key="c.value">
        <el-divider content-position="left">{{c.label }}</el-divider>
        <el-checkbox v-for="item in c.children" :key="item.value" :label="item.value" @change="handleCheckedChange($event,item.value)">
          {{ item.label }}
        </el-checkbox>
      </div>
    </el-checkbox-group>
    <!-- {{ checkList }} -->

    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="cancel">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { bus } from "@/main.js";
import { mapState, mapMutations } from "vuex";
export default {
  name: "editorsNote",
  data() {
    return {
      isDev: process.env.NODE_ENV == "development",
      form: {
        desc: "",
        labelPool: [],
      },
      checkList: [],
    };
  },
  computed: {
    ...mapState(["dialog", "conditional"]),
    id: function () {
      let p = this.dialog.编辑标签.temp;
      return this._.get(p, "id", "");
    },
    labelPool: function () {
      let p = this.dialog.编辑标签.temp;
      let pool = this.conditional.theLabel.options.filter((v) => {
        let esid = this._.get(p, "eS_Company_Id");
        return false || v.value == esid;
      });
      pool = this._.get(pool, "[0].children", []);
      return pool;
    },
  },
  watch: {
    "$store.state.dialog.编辑标签.visible": {
      deep: true,
      immediate: true,
      handler(nv, ov) {
        if (nv) {
          let p = this.dialog.编辑标签.temp;
          let tagId = this._.get(p, "tagId", []);
          tagId.forEach((v) => {
            this.checkList.push(v);
          });
        } else {
          this.checkList.splice(0, this.checkList.length);
        }
      },
    },
  },
  methods: {
    ...mapMutations(["toggleDialog"]),

    handleCheckedChange: function (isChecked, value) {
      let arg = {
        id: this.id,
        tagId: value,
      };
      if (isChecked) {
        this.$api
          .addUserTags(arg)
          .then((res) => {
            console.log(res);
            this.$message({
              message: "添加标签成功",
              type: "success",
            });
          })
          .catch((err) => {
            console.error(err);
            this.$message({
              message: "添加标签失败",
              type: "error",
            });
            this.checkList.pop();
          })
          .finally();
      } else {
        this.$api
          .delUserTags(arg)
          .then((res) => {
            console.log(res);
            this.$message({
              message: "移除标签成功",
              type: "success",
            });
          })
          .catch((err) => {
            console.error(err);
            this.$message({
              message: "移除标签失败",
              type: "error",
            });
            this.checkList.push(arg.tagId);
          })
          .finally();
      }
    },
    handleClose: function () {
      let arg = { id: this.id };
      this.$api.getUserTags(arg).then((res) => {
        if (res.code == 200) {
          console.log(arg.id);
          bus.$emit("updataTheLabel", { id: arg.id, arrTag: res.data });
        }
      });
    },
    cancel: function () {
      this.handleClose();
      this.toggleDialog({ type: "dialog", key: "编辑标签", tempData: null });
    },
  },
  updated: function () {},
};
</script>

<style>
</style>